<template>
	<view>
		<uni-section title="基本信息" sub-title="" type="line">
			<view class="form">
				<uni-forms ref="form" :model="model" :rules="rules">
					<uni-forms-item name="avatar">
						<view class="center">
							<image v-if="model.avatar" :style="{ width: '100px' }" :src="model.avatar" mode="widthFix"></image>
							<view>
								<button size="mini" type="primary" @click="onSelectImage">上传头像</button>
							</view>
						</view>
					</uni-forms-item>
					
					<uni-forms-item label="昵称" name="nickname" required>
						<uni-easyinput  v-model="model.nickname" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="性别" name="sex" required>
						<uni-data-checkbox  v-model="model.sex" :localdata="sexes" />
					</uni-forms-item>
					<uni-forms-item>
						<view class="center">
							<button size="mini" type="primary" @click="onSaveUserInfo">提交</button>
						</view>
					</uni-forms-item>
<!-- 					<uni-forms-item label="城市" name="nickname">
						<unicloud-city-select :location="true"></unicloud-city-select>
					</uni-forms-item> -->
				</uni-forms>
			</view>
		</uni-section>
		<uni-section title="认证" sub-title="" type="line">
			<button class="form-button" type="warn" openType="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号认证</button>
			<button class="form-button" type="primary" @click="onCertificate">实名认证</button>
		</uni-section>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { updatePhoneNum, updateUserInfo } from '../../api/auth.js'
import { fileUpload } from '../../api/util.js'
import { useUserStore } from '../../stores/user.js'

const userStore = useUserStore()

const form = ref({})
const model = ref({})
const rules = {
	nickname: {
		rules: [{
			required: true,
			errorMessage: '昵称不能为空'
		}]
	},
	sex: {
		rules: [{
			required: true,
			errorMessage: '性别不能为空'
		}]
	},
	avatar: {
		rules: [{
			required: true,
			errorMessage: '请上传头像'
		}]
	}
}

const sexes = [{ text: '男', value: 1 }, { text: '女', value: 0 }]

const onSelectImage = () => {
	uni.chooseImage({
		count: 1,
		success (res) {
			const { tempFilePaths  } = res
			fileUpload(tempFilePaths[0], ({ url }) => {
				model.value.avatar = url
			})
		}
	})
}

const onSaveUserInfo = () => {
	form.value.validate().then(async res => {
		const { success, data } = await updateUserInfo(model.value)
		if (success) {
			userStore.setUserInfo(data)
		}
	}).catch(err => {
		uni.showToast({
			title: '输入有误'
		})
	})
}

const onGetPhoneNumber = async (e) => {
	const { target: { code }} = e
	const { success, data } = await updatePhoneNum(code)
	if (!success) return
	userStore.setPhone(data.phoneNum)
}

const onCertificate = () => {
	uni.navigateTo({
		url: "/pages/my/certificate"
	})
}

onMounted(() => {
	const info = userStore.userInfo
	model.value = {
		nickname: info.nickname,
		sex: info.sex ? 1 : 0,
		avatar: info.avatar
	}
})
</script>

<style scoped lang="scss">
.form {
	padding: .1rem .5rem;
}
.form-button {
	margin: .2rem;
}
.center {
	text-align: center;
}
</style>
